<!-- 申请成为顾问 详情组件 --> 
<template>
  <view>
    <view class="flex items-center c-#fff text-28 w-full h-80 pl-4" :class="[`${statusBgColor}`]">{{ statusDesc }}</view>
    <view class="px-4 pb-20 flex flex-col w-full">
      <view class="flex items-start mt-2 c-#333 text-28">
        <view class="flex-shrink-0 w-190 font-bold">姓名</view>
        <view class="flex-1">{{ data.name || '' }}</view>
      </view>
      <view class="flex items-start mt-2 c-#333 text-28">
        <view class="flex-shrink-0 w-190 font-bold">公司</view>
        <view class="flex-1">{{ data.company_name || '' }}</view>
      </view>
      <view class="flex items-start mt-2 c-#333 text-28">
        <view class="flex-shrink-0 w-190 font-bold">职位</view>
        <view class="flex-1">{{ data.position || '' }}</view>
      </view>
      <view class="flex items-start mt-2 c-#333 text-28">
        <view class="flex-shrink-0 w-190 font-bold">常驻地区</view>
        <view class="flex-1">{{ data.address || '' }}</view>
      </view>
      <view class="flex items-start mt-2 c-#333 text-28">
        <view class="flex-shrink-0 w-190 font-bold">擅长领域</view>
        <view class="flex-1">{{ expertiseName || '' }}</view>
      </view>
      <view class="flex items-start mt-2 c-#333 text-28">
        <view class="flex-shrink-0 w-190 font-bold">课程主题</view>
        <view class="flex-1">{{ data.course_theme || '' }}</view>
      </view>
      <view class="flex items-start mt-2 c-#333 text-28">
        <view class="flex-shrink-0 w-190 font-bold">自我介绍</view>
        <view class="flex-1">{{ data.self_desc || '' }}</view>
      </view>
      <view class="flex items-start mt-2 c-#333 text-28">
        <view class="flex-shrink-0 w-190 font-bold">BANNER图</view>
        <view class="flex-1" @click="previewImage(data.banner, 0)">
          <u-image :src="data.banner?.length > 0 ? data.banner[0] : ''" width="252" height="144" border-radius="12" />
        </view>
      </view>
      <view class="flex items-start mt-2 c-#333 text-28">
        <view class="flex-shrink-0 w-190 font-bold">其他资质</view>
        <view class="flex-1 grid grid-cols-3 gap-1">
          <view v-for="(item, index) in data.other_qualifications" :key="index"
            @click="previewImage(data.other_qualifications, index)">
            <u-image class="ml-1 mb-1" :src="item" width="144" height="144" border-radius="12" />
          </view>
        </view>
      </view>
    </view>
    <view v-if="data?.audit_status == 2" class="h-150 bottom-wrap-16 bg-white">
      <u-line class="w-full" color="#eee" :hair-line="false" />
      <view class="btn-submit mt-1" @click="emit('reSubmit')">再次申请</view>
    </view>
  </view>
</template>

<script setup>
import { previewImage } from '@/common/util/uni';

const emit = defineEmits(['reSubmit'])
const props = defineProps({
  data: Object
})

const expertiseName = computed(() => props.data.expertise?.join(','))

const bgColorList = [
  { bgColor: 'bg-audit', desc: '已提交顾问申请材料，正在审核中~', value: 0 },
  { bgColor: 'bg-success', desc: '已通过审核~', value: 1 },
  { bgColor: 'bg-fail', desc: '审核失败：资料不完善', value: 2 },
]

// 状态提示语背景色
const statusBgColor = computed(() => {
  return bgColorList.find(v => v.value == props.data.audit_status)?.bgColor ?? '#F4AF22'
})
// 状态提示语
const statusDesc = computed(() => {
  return props.data.audit_status==2?`审核失败：${props.data.fail_reason}`: bgColorList.find(v => v.value == props.data.audit_status)?.desc
  // return bgColorList.find(v => v.value == props.data.audit_status)?.desc
})
</script>

<style lang='scss' scoped>
.option-item {
  display: flex;
  color: #333;
  font-size: 28rpx;
  font-family: PingFangSC-Medium;
}

.bg-audit {
  background-color: #F4AF22;
}

.bg-fail {
  background-color: #FF513A;
}

.bg-success {
  background-color: #3FB352;
}
</style>
